<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>更改密码</title>

    <meta content="ie=edge" http-equiv="x-ua-compatible"/>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <meta content="webkit" name="renderer"/>

    <link rel="stylesheet" th:href="@{/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css}"
          type="text/css"/>
    <link rel="stylesheet" th:href="@{/metronic/assets/global/css/components.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/metronic/assets/global/css/plugins.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/metronic/assets/layouts/layout/css/layout.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/metronic/assets/layouts/layout/css/custom.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/plugins/notyf/notyf.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/plugins/bootstrapvalidator/bootstrapValidator.min.css}" type="text/css"/>
    <style>
        html, body, .row {
            height: 100%;
        }

        .form-control-feedback {
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bubble font-green-sharp"></i>
                    <span class="caption-subject font-green-sharp sbold">修改密码</span>
                </div>
            </div>
            <div class="portlet-body">
                <form action="/system/user/resetUserInfo" class="form-horizontal" id="form-data">
                    <div class="form-group">
                        <label class="col-md-3 control-label">原密码:</label>
                        <div class="col-md-5">
                            <input class="form-control"
                                   id="password"
                                   name="password"
                                   type="password" v></div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">新密码:</label>
                        <div class="col-md-5">
                            <input class="form-control"
                                   id="newPassword"
                                   name="newPassword"
                                   type="password"
                                   value=""></div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">确认密码:</label>
                        <div class="col-md-5">
                            <input class="form-control"
                                   id="repassword"
                                   name="repassword"
                                   type="password"
                                   value=""></div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label"></label>
                        <div class="col-md-5">
                            <button class="btn green btn-lg" type="submit">提 交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/metronic/assets/global/plugins/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/notyf/notyf.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/bootstrapvalidator/bootstrapValidator.min.js}" type="text/javascript"></script>
<script>
    $(function () {
        var notyf = new Notyf();

        $('#form-data')
            .bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {/*input状态样式图片*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    password: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '请输入原密码'
                            }
                        }
                    },
                    newPassword: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '请输入新密码'
                            },
                            stringLength: {
                                min: 6,
                                max: 10,
                                message: '密码长度必须在6到10之间'
                            },
                            identical: {
                                field: 'repassword',
                                message: '两次密码不一致'
                            },
                        }
                    },
                    repassword: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '请确认密码'
                            },
                            identical: {
                                field: 'newPassword',
                                message: '两次密码不一致'
                            },
                        }
                    },
                }
            }).on('success.form.bv', function (e) {
            e.preventDefault();
            var $form = $(e.target);
            var bv = $form.data('bootstrapValidator');
            var data = {};
            $form
                .serializeArray()
                .map(function (item) {
                    data[item.name] = data[item.name] ? data[item.name] + ',' + $.trim(item.value) : $.trim(item.value);
                });
            data['mark'] = 'password';
            $.ajax({
                url: $form.attr('action'),
                method: 'POST',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
            }).done(function (result) {
                $('button:submit').attr('disabled', false);
                if (result.success) {
                    return notyf.confirm("修改密码成功~");
                }
                return notyf.alert(result.msg);
            });
            return false;
        });
    });
</script>
</body>

</html>
